<template>
	<view class="content">
		<text class="bankCard_str">请填写银行卡信息</text>
		<view class="card_form">
			<view class="form_card_id">
				<text>卡号</text>
				<input type="text" value="" placeholder="请填写卡号"/>
			</view>
			<view class="form_username">
				<text>姓名</text>
				<input type="text" value="" placeholder="持卡人姓名"/>
			</view>
			<view class="form_Certificates">
				<text>证件类型</text>
				<picker @change="bindPickerChange" :value="index" :range="list" range-key="name">
					<input disabled="fales" :value="list[index].name"  placeholder="请选择证件类型"/>
					<i class="iconfont iconjiantou qwert"></i>
				</picker>
			</view>
			<view class="form_Certificates_id">
				<text>证件号</text>
				<input type="text" value="" placeholder="请填写证件号" />
			</view>
			<view class="form_phone">
				<text>手机号码</text>
				<input type="text" value="" placeholder="请填写银行预留手机号码" />
			</view>
		</view>
		<view class="acceptAgreement">
			<view class="row3_item_radio">
				<checkbox value="changeText" checked="true"/>
				<text>　同意并接受</text>
				<navigator url="#">《相关协议》</navigator>
			</view>
		</view>
		<view class="btn">
			确认添加
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				{
					name: '军官证'
				}, {
					name: '护照'
				}, {
					name: '居民身份证'
				}, {
					name: '港澳通行证'
				}, {
					name: '其他'
				}],
				index: 2,
				type: '',
				form_Certificates_str: ''
			}
		},
		methods: {
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value; //下标
				// console.log(this.list[this.index].name) //输出绑定的证
			},
		}
	}
</script>

<style >
	body {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 34upx;
	}

	.row3_item_radio {
		height: 100upx;
		line-height: 100upx;
		padding: 0 0 0 16upx;
	}
	checkbox .wx-checkbox-input{
		border: 2upx solid #999999 !important;
		border-radius: 50%;
		width: 30upx;
		height: 30upx;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1px solid #FF9900 !important;
		background: #FF9900 !important;
		border-radius: 50%;
		width: 30upx;
		height: 30upx;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked:before{
		color: #FFFFFF;
		font-size: 28upx;
	}

	.row3_item_radio>text {
		vertical-align: middle;
		color: #999999;
	}

	.row3_item_radio>navigator {
		height: 0;
		display: inline-block;
		color: #FF9900;
	}


	.qwert {
		display: inline-block;
		float: right;
		margin-right: 20upx;
		color: #999999;
		font-size: 36upx;
		line-height: 93upx;
		margin-top: -94upx;
	}

	.content {
		background-color: #F3F3F3;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.bankCard_str {
		display: block;
		height: 88upx;
		color: rgba(153, 153, 153, 1);
		text-indent: 32upx;
		line-height: 88upx;
	}

	.card_form {
		height: 470upx;
		width: 750upx;
		background-color: white;
	}
	.card_form>view {
		height: 93upx;
		line-height: 94upx;
		width: 100%;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		text-indent: 16upx;
	}

	.card_form>view:last-child {
		border-bottom: 0px solid rgba(229, 229, 229, 1);
	}

	.form_card_id>text,
	.form_username>text,
	.form_Certificates>text,
	.form_Certificates_id>text,
	.form_phone>text {
		display: inline-block;
		width: 178upx;
		color: #333333;
		text-align: left;
	}

	.form_card_id,
	.form_username,
	.form_Certificates,
	.form_Certificates_id,
	.form_phone {
		display: inline-block;
		height: 93upx;
		line-height: 94upx;
		margin-top: 0upx;
		position: relative;
	}

	.card_form input {
		display: inline-block;
		line-height: 93upx;
		height: 48upx;
		position: absolute;
		top: 23upx;
		left: 200upx;
		width: 480upx;
	}
	.btn {
		width: 92%;
		margin: auto;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 34upx;
		color: #FFFFFF;
		background-color: #FF9900;
		border-radius: 8upx;
	}

	.uni-input {
		padding: 15upx 0upx;
	}
	
	.uni-input div div{
		left: -16upx;
	}

/* 	.uni-picker .uni-picker-action.uni-picker-action-confirm {
		color: #FF9900 !important;
	}

	.uni-picker .uni-radio-input-checked {
		background-color: #000000;
	}

	.uni-picker .uni-picker.uni-picker-toggle {
		height: 300px;
	} */
</style>
